<template>
  <div class="ratingselect">
      <div class="rating-type border-1px">
          <span class="block positive" :class="{'active':selectType === 2}" @click="select(2, $event)">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
          <span class="block positive" :class="{'active':selectType === 0}" @click="select(0, $event)">{{desc.positive}}<span class="count">{{descPositive.length}}</span></span>
          <span class="block negative" :class="{'active':selectType === 1}" @click="select(1, $event)">{{desc.negative}}<span class="count">{{descNegative.length}}</span></span>
      </div>
      <div class="switch" :class="{'on':onlyContent}" @click="toggleContent">
        <span class="icon-check_circle"></span>
        <span class="text">只看有内容的评价</span>
      </div>
  </div>
</template>

<script>
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2

export default {
    props: {
        ratings: {
            type: Array,
            default() {
                return []
            }
        },
        selectType: {
            Number,
            default: ALL
        },
        onlyContent: {
            type: Boolean,
            default: false
        },
        desc: {
            type: Object,
            default() {
                return {
                    all: '全部',
                    positive: '满意',
                    negative: '不满意'
                }
            }
        }
    },
    computed: {
       descPositive() {
           return this.ratings.filter((rating) => {
               return rating.rateType === POSITIVE
           })
       },
       descNegative() {
           return this.ratings.filter((rating) => {
               return rating.rateType === NEGATIVE
           })
       }
    },
    methods: {
       select(type, event) {
           if (!event._constructed) {
               return
           }
           this.selectType = type
           this.$emit('ratingtype-select', type)
       },
       toggleContent() {
           if (!event._constructed) {
               return
           }
           this.onlyContent = !this.onlyContent
           this.$emit('ratingtype-toggle', this.onlyContent)
       }
    }
}
</script>

<style lang='stylus' scoped>
@import '~common/stylus/mixin.styl'
@import '~common/stylus/variable.styl'

.ratingselect
    .rating-type
        height: 32px
        padding: 18px 0
        margin: 0 18px
        border-1px($color-row-line)
        .block
            margin-right: 8px
            display: inline-block
            width: 60px
            height: 32px
            line-height: 32px
            text-align: center
            font-size: 12px
            color: $color-gray
            border-radius: 2px
            &.active
                color: #fff
            .count
                font-size: 8px
            &.positive
                background-color: $color-light-blue
                &.active
                    background-color: $color-blue
            &.negative
                background-color: $color-light-gray
                &.active
                    background-color: $color-gray
    .switch
        padding: 12px 18px
        font-size: 0
        border-bottom: 2px solid $color-row-line
        @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
            border-bottom: 1.5px solid $color-row-line
        &.on
            .icon-check_circle
                color: $color-green2
        .icon-check_circle
            vertical-align: top
            margin-right: 4px
            font-size: 24px
            color: $color-gray2
        .text
            line-height: 24px
            vertical-align: top
            font-size: 12px
            color: $color-gray2
</style>
